<template>
 <div class="bg">
  <div class="img-class">
    <img src="../../static/images/cat11.jpg" height="500px">
    <div class="title">
      <p class="big-size">欢迎使用宠物商城支持</p>
      <p class="mid-size">我们24小时提供帮助</p>
        <Input v-model="value" placeholder="Searching..." style="width: 300px;margin-top: 2%" />
    </div>
  </div>
  <div class="row">
    <div class="item-div">
      <img src="static/images/wmm.png"/>
      <p>无毛猫</p>
    </div>
    <div class="item-div">
      <img src="static/images/XLM.png"/>
      <p>暹罗猫</p>
      </div>
    <div class="item-div">
      <img src="static/images/bom.png"/>
      <p>布偶猫</p>
    </div>
    <div class="item-div">
      <img src="static/images/MDM.png"/>
      <p>美短猫</p>
    </div>
    <div class="item-div">
      <img src="static/images/YDM.png"/>
      <p>英短猫</p>
    </div>
  </div>
   <div class="img-class1">
     <img src="../../static/images/cat11.jpg"/>
   </div>
   <div class="title1">
     <p class="big-size1">享受您的爱宠乐园</p>
     <p class="mid-size1">让您与您的爱宠享受最优的服务...</p>
   </div>
   <div class="ac">

   </div>
 </div>

</template>

<script>
    export default {
        name: "light",
        data () {
          return {
            value: ''
          }
        }
    }
</script>

<style lang="stylus" scoped type="text/stylus">
  @import '~@/common/variable.styl'
  .bg {
    background-color #FFFF92
    .img-class {
      width 100%;
      position relative
      img {
        display block;
        width 100%;
      }
      .title {
        position absolute
        top 0px
        left 0px
        right 0px
        margin-top 12%
        text-align center
        color white
        .big-size {
          font-size: 40px;
        }
        .mid-size {
          font-size: 26px;
          margin-top 2%
        }
      }
    }
    .row {
      overflow hidden;
      margin-bottom 1px;
      width 100%
      text-align center
      .item-div {
        display inline-block
        width 10%;
        vertical-align top
        margin 10px 20px;
        img {
          width 100%
          height 100px
        }
        p {
          font-size 14px;
          text-align center
        }
      }
    }
    .img-class1 {
      width 400px
      height 30%
      text-align center
      img {
        width 100%
        height 300px
        margin-left 240px
      }
    }
    .title1 {
      top 0px
      left 0px
      right 0px
      margin-top 12%
      float right
      margin-top -200px
      margin-right 240px
      .big-size1 {
        font-size: 36px;
      }
      .mid-size1 {
        font-size: 26px;
        margin-top 2%
      }
    }
    .ac{
      text-align center
    }
  }

</style>
